<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-overlay :show="showBase" @close="handleCloseBase"></pure-overlay>
            <pure-button text="显示遮罩层" @onClick="handleShowBase" class="pure-button-primary"></pure-button>
        </a-demo>

        <a-demo title="嵌入内容">
            <pure-overlay :show="showContent" @close="handleCloseContent">
                <view class="block" @tap.stop>嵌入内容</view>
            </pure-overlay>
            <pure-button text="嵌入内容" @onClick="handleShowContent" class="pure-button-success"></pure-button>
        </a-demo>

        <a-demo title="锁定背景滚动" desc="不影响遮罩内容触摸滚动">
            <pure-overlay :show="showLock" @close="handleCloseLock" @touchmove.stop.prevent="" @wheel.stop.prevent="">
                <view class="block" @tap.stop>
                    <scroll-view style="width: 100%; height: 100%" scroll-y>
                        <view class="rows rows-inner">
                            <view class="row" v-for="i in 20" :key="i" :style="`background: var(--pure-theme-${themes[i % 5]})`"></view>
                        </view>
                    </scroll-view>
                </view>
            </pure-overlay>
            <pure-button text="锁定背景滚动" @onClick="handleShowLock" class="pure-button-danger"></pure-button>
        </a-demo>

        <a-demo title="内容位置">
            <pure-overlay :show="showPosition" @close="handleClosePosition" :class="`pure-overlay-${position}`">
                <view class="block" @tap.stop>{{ position }}</view>
            </pure-overlay>
            <view class="buttons">
                <pure-button text="左上" @onClick="handleShowPosition('left-top')" class="pure-button-primary pure-button-block"></pure-button>
                <pure-button text="左中" @onClick="handleShowPosition('left-center')" class="pure-button-primary pure-button-block"></pure-button>
                <pure-button text="左下" @onClick="handleShowPosition('left-bottom')" class="pure-button-primary pure-button-block"></pure-button>
            </view>
            <view class="buttons">
                <pure-button text="中上" @onClick="handleShowPosition('center-top')" class="pure-button-success pure-button-block"></pure-button>
                <pure-button text="中中" @onClick="handleShowPosition('center-center')" class="pure-button-success pure-button-block"></pure-button>
                <pure-button text="中下" @onClick="handleShowPosition('center-bottom')" class="pure-button-success pure-button-block"></pure-button>
            </view>
            <view class="buttons">
                <pure-button text="右上" @onClick="handleShowPosition('right-top')" class="pure-button-danger pure-button-block"></pure-button>
                <pure-button text="右中" @onClick="handleShowPosition('right-center')" class="pure-button-danger pure-button-block"></pure-button>
                <pure-button text="右下" @onClick="handleShowPosition('right-bottom')" class="pure-button-danger pure-button-block"></pure-button>
            </view>
        </a-demo>

        <a-demo title="自定义过渡动画">
            <view class="custom-animation">
                <pure-overlay :show="showCustom" @close="handleCloseCustom">
                    <view class="block" @tap.stop>自定义过渡动画</view>
                </pure-overlay>
                <pure-button text="自定义过渡动画" @onClick="handleShowCustom" class="pure-button-warning"></pure-button>
            </view>
        </a-demo>

        <a-demo title="填充一些内容用以演示锁定背景滚动">
            <view class="rows">
                <view class="row" v-for="i in 20" :key="i" :style="`background: var(--pure-theme-${themes[i % 5]})`"></view>
            </view>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 主题
    const themes = ref(["primary", "success", "danger", "warning", "info"]);

    // 显示状态
    const showBase = ref(false);
    const showContent = ref(false);
    const showLock = ref(false);
    const showPosition = ref(false);
    const position = ref("center-center");
    const showCustom = ref(false);

    // 显示遮罩层
    function handleShowBase() {
        showBase.value = true;
    }

    // 关闭遮罩层
    function handleCloseBase() {
        showBase.value = false;
    }

    // 显示遮罩层
    function handleShowContent() {
        showContent.value = true;
    }

    // 关闭遮罩层
    function handleCloseContent() {
        showContent.value = false;
    }

    // 显示遮罩层
    function handleShowLock() {
        showLock.value = true;
    }

    // 关闭遮罩层
    function handleCloseLock() {
        showLock.value = false;
    }

    // 显示遮罩层
    function handleShowPosition(_position) {
        position.value = _position;
        showPosition.value = true;
    }

    // 关闭遮罩层
    function handleClosePosition() {
        showPosition.value = false;
    }

    // 显示遮罩层
    function handleShowCustom() {
        showCustom.value = true;
    }

    // 关闭遮罩层
    function handleCloseCustom() {
        showCustom.value = false;
    }
</script>

<style lang="scss" scoped>
    .block {
        width: 180px;
        height: 180px;
        background: var(--pure-background-element);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        border-radius: 5px;
        box-sizing: border-box;
    }

    .rows {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px 0;
    }

    .rows-inner {
        box-sizing: border-box;
        padding: 10px 10px;
        gap: 5px;
        margin: 0;
    }

    .row {
        height: 40px;
        border-radius: 5px;
        opacity: 0.5;
    }

    .rows-inner .row {
        height: 20px;
    }

    .buttons {
        display: flex;
        gap: 10px;
        margin: 10px 0;
    }

    :deep(.custom-animation) {
        --pure-overlay-transition-timing-function: ease-in-out;

        .pure-overlay-before-hide {
            transform: scale(1);
        }

        .pure-overlay-to-hide {
            transform: scale(1.5);
        }

        .pure-overlay-hide {
            transform: scale(0);
        }

        .pure-overlay-before-show {
            transform: scale(0);
        }

        .pure-overlay-to-show {
            transform: scale(1.5);
        }

        .pure-overlay-show {
            transform: scale(1);
        }
    }
</style>
